<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background-color: #f00;
            position: absolute;
            cursor: move;
        }
    </style>
</head>
<body>

    <div></div>

    <script>

        // 拖拽
        //   鼠标按下    要找到鼠标的位置
        //   鼠标移动
        //   鼠标抬起


        class Drag {
            constructor(smallBox) {
                this.smallBox = document.querySelector(smallBox) ;
                this.gapX ,this.gapY ;
                // 鼠标按下
                this.down() ;
            }
            down() {

                // 鼠标按下
                this.smallBox.onmousedown = e => {
                    // 要找到鼠标的位置
                    this.gapX = e.offsetX ;
                    this.gapY = e.offsetY ;
                    this.move() ;
                    this.up() ;
                }
            }
            move() {
                // 鼠标移动
                document.onmousemove = e => {
                    const x = e.x - this.gapX ;
                    const y = e.y - this.gapY ;
                    // console.log(x , y);
                    this.smallBox.style.cssText = `left:${x}px;top:${y}px`;
                    this.up() ;
                }
            }
            up() {
                // 鼠标抬起
                document.onmouseup = () => {
                    console.log(88);
                    document.onmousemove = null ;
                    document.onmouseup = null;
                }
            }
        }


        new Drag('div');

    </script>
    
</body>
</html>